// 地图社交App主题配置
const colors = {
  // 主色调 - 使用蓝绿色系，符合地图和社交的特性
  primary: {
    main: '#2196F3',        // 主蓝色 - 信任感和科技感
    light: '#64B5F6',       // 浅蓝色 - 用于悬停状态
    dark: '#1976D2',        // 深蓝色 - 用于按下状态
    contrast: '#FFFFFF',    // 主色对比色
  },
  
  // 辅助色调 - 地图相关的绿色系
  secondary: {
    main: '#4CAF50',        // 地图绿色 - 位置和导航
    light: '#81C784',       // 浅绿色
    dark: '#388E3C',        // 深绿色
    contrast: '#FFFFFF',
  },
  
  // 强调色 - 社交互动相关
  accent: {
    orange: '#FF9800',      // 橙色 - 点赞、收藏等积极操作
    red: '#F44336',         // 红色 - 警告、删除等
    purple: '#9C27B0',      // 紫色 - VIP、特殊标识
    yellow: '#FFC107',      // 黄色 - 提醒、通知
  },
  
  // 中性色系
  neutral: {
    white: '#FFFFFF',
    black: '#000000',
    gray: {
      50: '#FAFAFA',
      100: '#F5F5F5',
      200: '#EEEEEE',
      300: '#E0E0E0',
      400: '#BDBDBD',
      500: '#9E9E9E',
      600: '#757575',
      700: '#616161',
      800: '#424242',
      900: '#212121',
    },
  },
  
  // 背景色系
  background: {
    primary: '#FFFFFF',     // 主背景
    secondary: '#F8F9FA',   // 次要背景
    card: '#FFFFFF',        // 卡片背景
    modal: 'rgba(0,0,0,0.5)', // 模态框遮罩
    map: '#E8F4FD',         // 地图背景色
  },
  
  // 文本色系
  text: {
    primary: '#212121',     // 主要文本
    secondary: '#757575',   // 次要文本
    disabled: '#BDBDBD',    // 禁用文本
    hint: '#9E9E9E',        // 提示文本
    inverse: '#FFFFFF',     // 反色文本
    link: '#2196F3',        // 链接文本
  },
  
  // 边框色系
  border: {
    light: '#E0E0E0',
    medium: '#BDBDBD',
    dark: '#757575',
  },
  
  // 状态色系
  status: {
    success: '#4CAF50',     // 成功
    warning: '#FF9800',     // 警告
    error: '#F44336',       // 错误
    info: '#2196F3',        // 信息
    online: '#4CAF50',      // 在线状态
    offline: '#9E9E9E',     // 离线状态
  },
  
  // 地图专用色系
  map: {
    userLocation: '#2196F3',    // 用户位置标记
    friendLocation: '#4CAF50',  // 好友位置标记
    eventLocation: '#FF9800',   // 活动位置标记
    routeLine: '#2196F3',       // 路线颜色
    selectedArea: 'rgba(33, 150, 243, 0.2)', // 选中区域
  },
};

// 字体大小配置 - 基于Material Design和iOS Human Interface Guidelines
const typography = {
  // 标题字体
  heading: {
    h1: {
      fontSize: 32,
      fontWeight: '700',
      lineHeight: 40,
      letterSpacing: -0.5,
    },
    h2: {
      fontSize: 28,
      fontWeight: '600',
      lineHeight: 36,
      letterSpacing: -0.25,
    },
    h3: {
      fontSize: 24,
      fontWeight: '600',
      lineHeight: 32,
      letterSpacing: 0,
    },
    h4: {
      fontSize: 20,
      fontWeight: '600',
      lineHeight: 28,
      letterSpacing: 0.25,
    },
    h5: {
      fontSize: 18,
      fontWeight: '500',
      lineHeight: 24,
      letterSpacing: 0,
    },
    h6: {
      fontSize: 16,
      fontWeight: '500',
      lineHeight: 22,
      letterSpacing: 0.15,
    },
  },
  
  // 正文字体
  body: {
    large: {
      fontSize: 16,
      fontWeight: '400',
      letterSpacing: 0.15,
    },
    medium: {
      fontSize: 14,
      fontWeight: '400',
      lineHeight: 20,
      letterSpacing: 0.25,
    },
    small: {
      fontSize: 12,
      fontWeight: '400',
      lineHeight: 16,
      letterSpacing: 0.4,
    },
  },
  
  // 按钮字体
  button: {
    large: {
      fontSize: 16,
      fontWeight: '500',
      lineHeight: 24,
      letterSpacing: 0.5,
      textTransform: 'uppercase',
    },
    medium: {
      fontSize: 14,
      fontWeight: '500',
      lineHeight: 20,
      letterSpacing: 0.75,
      textTransform: 'uppercase',
    },
    small: {
      fontSize: 12,
      fontWeight: '500',
      lineHeight: 16,
      letterSpacing: 1,
      textTransform: 'uppercase',
    },
  },
  
  // 标签字体
  label: {
    large: {
      fontSize: 14,
      fontWeight: '500',
      lineHeight: 20,
      letterSpacing: 0.1,
    },
    medium: {
      fontSize: 12,
      fontWeight: '500',
      lineHeight: 16,
      letterSpacing: 0.5,
    },
    small: {
      fontSize: 10,
      fontWeight: '500',
      lineHeight: 14,
      letterSpacing: 1,
    },
  },
  
  // 说明文字
  caption: {
    fontSize: 12,
    fontWeight: '400',
    lineHeight: 16,
    letterSpacing: 0.4,
  },
  
  // 过度文字
  overline: {
    fontSize: 10,
    fontWeight: '500',
    lineHeight: 14,
    letterSpacing: 1.5,
    textTransform: 'uppercase',
  },
};

// 间距配置
const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48,
};

// 圆角配置
const borderRadius = {
  none: 0,
  sm: 4,
  md: 8,
  lg: 12,
  xl: 16,
  full: 9999,
};

// 阴影配置
const shadows = {
  none: {
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0,
    shadowRadius: 0,
    elevation: 0,
  },
  sm: {
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.18,
    shadowRadius: 1.0,
    elevation: 1,
  },
  md: {
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.23,
    shadowRadius: 2.62,
    elevation: 4,
  },
  lg: {
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.30,
    shadowRadius: 4.65,
    elevation: 8,
  },
  xl: {
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.37,
    shadowRadius: 7.49,
    elevation: 12,
  },
};

// 主题对象
const theme = {
  colors,
  typography,
  spacing,
  borderRadius,
  shadows,
};

// 暗色主题
const darkTheme = {
  ...theme,
  colors: {
    ...colors,
    primary: {
      ...colors.primary,
      main: '#64B5F6',
      light: '#90CAF9',
      dark: '#42A5F5',
    },
    background: {
      primary: '#121212',
      secondary: '#1E1E1E',
      card: '#2C2C2C',
      modal: 'rgba(0,0,0,0.8)',
      map: '#1A1A1A',
    },
    text: {
      primary: '#FFFFFF',
      secondary: '#B3B3B3',
      disabled: '#666666',
      hint: '#888888',
      inverse: '#000000',
      link: '#64B5F6',
    },
    border: {
      light: '#333333',
      medium: '#555555',
      dark: '#777777',
    },
  },
};

export { theme, darkTheme };
export default theme;